<template>
  <xtx-dialog
    :title="sizeForm.id?'编辑尺码':'新建尺码'"
    :visible.sync="visibleDialog"
    :showCancel="false"
    :showSubmit="false"
    width="940px"
  >
    <div class="xtx-center-size-new">
      <div class="pic">
        <img :src="img" alt />
      </div>
      <div class="form">
        <div class="form-item">
          <span class="label">姓名：</span>
          <input v-model="sizeForm.name" type="text" placeholder="收货人姓名" />
        </div>
        <div class="form-item">
          <span class="label">性别：</span>
          <xtx-select
            v-model="sizeForm.gender"
            :options="[
              { value: '男', label: '男' },
              { value: '女', label: '女' },
              { value: '未知', label: '未知' },
            ]"
          ></xtx-select>
        </div>
        <div class="form-item2">
          <span class="label">身高(cm)</span>
          <input v-model="sizeForm.height" type="text" />
        </div>
        <div class="form-item2">
          <span class="label">体重(kg)</span>
          <input v-model="sizeForm.bodyWeight" type="text" />
        </div>
        <div class="form-item2">
          <span class="label">肩宽(cm)</span>
          <input v-model="sizeForm.shoulderWidth" type="text" />
        </div>
        <div class="form-item2">
          <span class="label">胸围(cm)</span>
          <input v-model="sizeForm.chestCircumference" type="text" />
        </div>
        <div class="form-item2">
          <span class="label">腰围(cm)</span>
          <input v-model="sizeForm.waistCircumference" type="text" />
        </div>
        <div class="form-item2">
          <span class="label">臀围(cm)</span>
          <input v-model="sizeForm.hips" type="text" />
        </div>
        <div class="form-item2">
          <span class="label">脚长(cm)</span>
          <input v-model="sizeForm.footSize" type="text" />
        </div>
        <div class="form-item2">
          <span class="label">脚围(cm)</span>
          <input v-model="sizeForm.footCircumference" type="text" />
        </div>
        <div class="form-item start">
          <xtx-checkbox v-model="sizeForm.isDefault">设为默认</xtx-checkbox>
        </div>
        <div class="form-item" style="text-algin:right">
          <xtx-button type="gray" @click="visibleDialog=false">取消</xtx-button>
          <xtx-button type="pirmary" @click="submit()">保存</xtx-button>
        </div>
      </div>
    </div>
  </xtx-dialog>
</template>

<script>
export default {
  name: 'size-new',
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      img: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/center-size.png',
      visibleDialog: false,
      sizeForm: {},
      isDefault: false
    }
  },
  methods: {
    async submit () {
      const form = { ...this.sizeForm }
      form.isDefault = form.isDefault ? 1 : 0
      if (form.id) {
        await this.$http.put('member/profile/property/' + this.sizeForm.id, form)
        this.$message({ message: '编辑尺码成功', type: 'success' })
      } else {
        const { data } = await this.$http.post('member/profile/property', form)
        form.id = data.result.id
        this.$message({ message: '新增尺码成功', type: 'success' })
      }
      this.$emit('on-complete', form)
      this.visibleDialog = false
    },
    open () {
      this.visibleDialog = true
      if (this.item.id) {
        this.sizeForm = { ...this.item }
        this.sizeForm.isDefault = this.sizeForm.isDefault === 1
      } else {
        this.sizeForm = {
          height: '',
          bodyWeight: '',
          shoulderWidth: '',
          chestCircumference: '',
          waistCircumference: '',
          hips: '',
          footSize: '',
          footCircumference: '',
          name: '',
          gender: '',
          isDefault: false
        }
      }
    }
  }
}
</script>

<style scoped lang='less'>
@import "../styles/size-new.less";
.xtx-dialog ::v-deep > .new-box > .body {
  padding: 20px;
}
</style>
